<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>6.11</title>
	<script src="js/vue.js"></script>
	</head>
	<style>
		#app {
			width: 600px;
			margin: 40px auto;
		}
		.outer {
			display: flex;
			margin-bottom: 20px;
		}
		.inner {
			padding: 0 10px;
			text-align: center;
			min-width: 100px;
			border-bottom: 1px solid #000;
			font-weight: bold;
			color: red;
		}
	</style>
	<body>
		<div id="app">
			<div class="outer">今天天气不错，我准备</div>
			  <div class="inner">{{activity}}</div>
		</div>
		<advice @advice="receiveAdvice"></advice>
	</body>
	<script>
		Vue.component('advice',{
			data() {
				return {
					arr: ['打篮球','野炊','游泳','宅在家','复习迎考']
				}
			},
			
		})
	</script>
</html>